<template>
  <div class="search_header">
  <v-touch class="search_back" @tap="handleBack" >
      <i class="iconfont">&#xe62b;</i>
      <div>返回</div>
    </v-touch>
    <div class="search_content">
      <i class="iconfont">&#xe624;</i>
      <input type="text" v-model="searchKeyWord"/>
    </div>
       <v-touch 
            tag="div"
            @tap="handleSearchList()"
            >搜索</v-touch>
   
  </div>
</template>

<script>
export default {
    name:"searchHeader",
    data(){
        return{
            searchKeyWord: "",
            searchKeywordList:[]
        }
    },
    methods:{
       handleBack(){
      this.$router.back();
    },  
     handleSearchList(item){
      //  console.log(this.searchKeyWord)
      // this.$router.push("/searchList/"+"keyword="+this.searchKeyWord);
      this.$router.push("/searchList/"+this.searchKeyWord)
      // 有问题 +"keyword="
    },

    }

}
</script>

<style>
.search_header {
  width: 100%;
  height: 1.08rem;
  padding: 0 0.2rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-top:1px solid #ebebeb ;
   border-bottom: 1px solid  #ebebeb ; 
   padding-left: 20px
}
.search_header .search_back {
  position: absolute;
  left: 0.2rem;
  display: flex;
  font-size: 0.3rem;
  align-items: center;
}
.search_header .search_back i {
  font-size: 0.5rem;
}

.search_header > div:nth-child(3) {
  position: absolute;
  right: 0.2rem;
  font-size: 0.3rem;
}
.search_header .search_content {
  display: flex;
  align-items: center;
  position: relative;
}

.search_header .search_content i {
  position: absolute;
  left: 0.2rem;
  font-size: 0.4rem;
}
.search_header .search_content input {
  border: 0;
  background:#f1f1f1;
  width: 4.5rem;
  height: 0.66rem;
  border-radius: 15px;
  padding-left: 0.8rem;
  font-size: 0.3rem;
  outline: none;
}
</style>